<template>
  <div>
    <div class="in_search">
      <van-search
        v-model="value"
        label="广州"
        background="#4fc08d"
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #left-icon>
          <van-icon class="iconfont icon-xiasanjiaoxing" />
        </template>
      </van-search>

      <div class="left">
        <van-icon
          name="arrow-left"
          size="25"
          color="#fff"
          @click="$router.back()"
        />
      </div>
      <div class="right">
        <van-icon
          name="location-o"
          size="25"
          color="#fff"
          @click="$router.push('/map')"
        />
      </div>
    </div>
    <!-- 区域 -->
    <van-dropdown-menu active-color="#21b97a">
      <van-dropdown-item v-model="value1" title="区域" ref="dom1">
        <van-picker
          show-toolbar
          :columns="columnsFn"
          @confirm="onConfirm1"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-dropdown-item>
      <!-- 方式 -->
      <van-dropdown-item v-model="value2" title="方式" ref="dom2">
        <van-picker
          show-toolbar
          :columns="columns1"
          @confirm="onConfirm2"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-dropdown-item>
      <!-- 租金 -->
      <van-dropdown-item v-model="value3" title="租金" ref="dom3">
        <van-picker
          show-toolbar
          :columns="columns2"
          @confirm="onConfirm3"
          @cancel="onCancel"
          @change="onChange"
        />
      </van-dropdown-item>
      <!-- 筛选 -->
      <van-dropdown-item v-model="value4" title="筛选" @open="showPopup">
        <router-view></router-view>
      </van-dropdown-item>
      <template>
        <van-popup
          v-model="show"
          position="right"
          :style="{ height: '100%', width: '70%' }"
        >
         <van-cell value='户型'/>
          <p>jjhhhh</p>
        </van-popup>
      </template>
    </van-dropdown-menu>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ListL v-for="(item, index) in list" :key="index" :item="item"></ListL>
    </van-list>
  </div>
</template>

<script>
import ListL from '@/components/ListI.vue'
import { housecondition, searchHouse } from '@/api/house'

export default {
  components: {
    ListL
  },

  data () {
    return {
      show: false,
      loading: false,
      finished: false,
      list: [],
      value: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      columns: [

      ],
      columns1: [],
      columns2: [],
      obj: {},
      data: {}
    }
  },
  async created () {
    const res = await searchHouse('AREA|88cff55c-aaa4-e2e0')
    this.list = res.body.list
    console.log(this.list)
    const data = await housecondition('AREA|88cff55c-aaa4-e2e0')
    this.data = data.body
    console.log(data)
    console.log(data.body.price)
    // 拿到axios里面的 金钱
    this.columns2 = data.body.price.map(item => item.label)
    // console.log(this.columns2)
    // 拿到axios里面的方式
    this.columns1 = data.body.rentType.map(item => item.label)

    // 拿到axios里面的区域，用了计算属性
    this.columns = [data.body.area, data.body.subway]
    // console.log(this.columns)
    this.finished = true
  },
  computed: {
    columnsFn () {
      const newLIst = this.columns.map(item => {
        let str = JSON.stringify(item)
        // console.log(str)
        // 全局改变label变成text,要先把数组转字符串才能用正ze
        str = str.replace(/"label"/g, '"text"')
        // 找到 '"value":"null"这一个替换成 '"value":"null","children":[{"text":"不限","value":"null"
        str = str.replace(/"value":"null"/,
          '"value":"null","children":[{"text":"不限","value":"null"}]')
        return JSON.parse(str)
      })
      // console.log(newLIst)
      return newLIst
    }
  },
  methods: {
    showPopup () {
      this.show = true
    },
    onLoad () {},
    onSearch () {},
    onsubmit () {},
    onConfirm1 (value, index) {
      this.$refs.dom1.toggle(false)
      const [a, b, c] = index
      // a代表点击的是地铁或者是区域，b就是代表第点击第一个children里面的那一个，c就是第二个children里面点击的那一个，然后最终会有value
      console.log(this.columns)
      const newvalue = this.columns[a].children[b].children[c].value
      this.obj.area = newvalue
      this.obj = { ...this.obj }
      // console.log(res)
      console.log(index)
      console.log(value)
    },
    // 方式
    onConfirm2 (value, index) {
      // 获取dom关闭确认
      this.$refs.dom2.toggle(false)
      // 通过索引找到对应的值true false null
      const newvalue = this.data.rentType[index].value
      console.log(newvalue)
      // 把得到的数据放在obj里
      this.obj.rentType = newvalue
      // 为了让watch监听到变化 地址改变了，数据没变
      this.obj = { ...this.obj }
    },
    // 租金
    onConfirm3 (value, index) {
      this.$refs.dom3.toggle(false)
      const newvalue = this.data.price[index].value
      this.obj.price = newvalue
      this.obj = { ...this.obj }
    },
    onChange (picker, value, index) {},
    onCancel () {}
  },
  watch: {
    // 监听obj只要发生变化就意味着obj新增添了数据，一有变化就携带新的数据再次发送请求
    async obj () {
      const res = await searchHouse('AREA|88cff55c-aaa4-e2e0', this.obj)
      this.list = res.body.list
      console.log(1)
    }
  }
}
</script>

<style lang="less" scoped>
.in_search {
  overflow: hidden;
  background-color: #21b97a;
  width: 1000px;
  height: 80px;
}
.left {
  margin-top: 28px;
}
.right {
  margin-top: -28px;
  margin-left: 345px;
}
</style>
